<template>
	<app-layout>
		<view class="template-order">
			<tn-nav-bar :bottomShadow="!!0"></tn-nav-bar>
			<!-- 顶部标签 -->
			<!-- 顶部自定义导航 -->
			<view class="tabs-fixed tn-bg-white">
				<view class="tn-flex tn-flex-col-between tn-flex-col-center tn-padding-top-sm"
					:style="{marginTop: vuex_custom_bar_height + 'px'}">
					<view class="justify-content-item" style="width: 87vw;overflow: hidden;">
						<tn-tabs class="tabs" :list="typelist" :countshow="!!1" :isScroll="false" :current="level"
							name="details" style="width: 87vw;" @change="tabsChange" :onlycountshow="key==4"></tn-tabs>
					</view>

					<view class="justify-content-item" style="width: 13vw;overflow: hidden;" @click="findshow">
						<view class="tn-color-black tn-round"
							style="font-size: 45rpx;margin-top: -5rpx;margin-left: 15rpx;">
							<text class="tn-icon-search tn-padding-xs"></text>
						</view>
					</view>
				</view>
			</view>
			<userlist @userclick="checkface" :list="userlist" :zm="zm" :issearch="search"></userlist>
			<view class="">
				<userselect ref="userselect" @select="findsome" @close="userclose"></userselect>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import templatePageMixin from '@/libs/mixin/template_page_mixin.js'
	import userselect from '@/components/user-select.vue';

	export default {
		name: 'comuserlist',
		mixins: [templatePageMixin],
		components: {
			userselect
		},
		data() {
			return {
				level: 0,
				key: 0,
				userlist: [],
				param: {},
				page: 1,
				typelist: [],
				search:"",
			}
		},
		onLoad(options) {
			this.level = options.level ? parseInt(options.level) : this.level;
			this.key = options.key ? options.key : this.key;
			uni.setNavigationBarTitle({
				title: options.title ? options.title : '重点人员'
			})
			if (!this.key) {
				uni.showModal({
					title: '提示',
					content: '列表ID不存在，请稍后再试',
					showCancel: false,
					success() {
						t.goBack()
					}
				})
			}
			this.getList()
		},
		onReady() {

		},
		onReachBottom() {
			this.getList();
		},
		computed: {
			zm() {
				return this.key == 2 || this.key == 8
			}
		},

		methods: {
			// 跳转
			checkface(user) {
				let url = `/discoveryPages/userinfo?id=${user.mfid}&checkname=${user.username}`;

				uni.navigateTo({
					url: url
				});
			},

			// 标签栏值发生改变
			tabsChange(index) {
				this.level = index
				this.page = 1;
				this.getList();
			},
			findsome(e) {
				this.page = 1;
				this.search = e;
				this.getList()
			},

			findshow() {
				this.$refs['userselect'].show = !!1;
			},

			userclose(e) {
				
			},
			getList() {
				let t = this;
				if (t.page == 1) {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 0
					})
				}
				let fcfl = '全部'
				let subkey = ''
				if (t.key == 2 || t.key == 4 || t.key == 8 || t.key == 5) {
					fcfl = '全部'
					subkey = t.typelist.length > 0 ? t.typelist[t.level].id : 0
				} else {
					fcfl = t.typelist.length > 0 ? t.typelist[t.level].name : '全部'
					subkey = ''
				}
				this.$t.message.loading("加载中");
				this.$request({
					url: t.$api.common.get_keyper,
					method: "POST",
					data: {
						key: t.key,
						limit_page: t.page,
						limit_count:20,
						subkey: subkey,
						fcfl: fcfl,
						...this.search
					}
				}).then(response => {
					this.$t.message.closeLoading();
					if (response.code === 0) {
						t.typelist = response.fcfl
						if (this.page !== 1) {
							this.userlist = this.userlist.concat(response.list);
						} else {
							this.userlist = response.list;
						}
						this.page = response.list.length ? this.page + 1 : this.page;

					} else {
						uni.showModal({
							title: '',
							content: msg,
							showCancel: false,
						});
					}
				}).catch((msg) => {
					this.$t.message.toast(msg);
					this.$t.message.closeLoading();
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.nobody {
		height: 500rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}


	.face {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
	}

	.userlist {
		padding-top: 10rpx;
		position: relative;

		.user {
			position: relative;
			margin: 20rpx;
			padding: 36rpx 26rpx;
			border-radius: 15rpx;
			background-color: #fff;
			box-shadow: 0px 0px 26px 0px rgba(0, 0, 0, 0.07);
		}

		.usertag {
			position: absolute;
			top: 10rpx;
			right: 10rpx;
		}
	}

	.search {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: inherit;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0vw;
		box-shadow: 0px 0px 26px 0px rgba(0, 0, 0, 0.07);
		z-index: 99;
		background-color: #FFFFFF;
		height: 100rpx;

		.city {
			border-right: 2rpx solid #888888;
			margin: 0 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.box {
			margin-right: 50rpx;
		}
	}

	.tabs {}
</style>